<template>
	<view :class="screen?'bg-conten container':'bg-conten'">
		<uv-navbar v-if="!isPc" :title="appName" @leftClick="leftClick" leftIconSize="0px"
			:placeholder="true"></uv-navbar>
		<view class="login-index">
			<uv-row customStyle="margin-bottom: 10px" justify="center">
				<uv-image justify="conter" src="../../static/logo.svg" width="100px" height="100px"></uv-image>
			</uv-row>

			<uv-form labelPosition="top" :model="model1" :rules="rules" ref="form">
				<uv-form-item label="手机号或邮箱" prop="username" label-width="150px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入手机号或邮箱" border="bottom" v-model="model1.username" clearable>
						<!-- vue3模式下必须使用v-slot:suffix -->
						<template v-slot:suffix>
							<uv-code ref="uCode" @change="codeChange" :seconds="seconds" changeText="X秒后重新获取"></uv-code>
							<uv-button @click="getCode" :text="codeTips" type="success"></uv-button>
						</template>
					</uv-input>
				</uv-form-item>
				<uv-form-item label="验证码" prop="code" label-width="200px" :customStyle="{fontWeight: 'bold',}">
					<uv-input placeholder="请输入验证码" v-model="model1.code">
						<!-- vue3模式下必须使用v-slot:prefix -->
						<template v-slot:suffix>
							<uv-parse v-if="captchaImg" :content="captchaImg"></uv-parse>
						</template>
					</uv-input>
				</uv-form-item>
			</uv-form>
			<uv-checkbox-group
				custom-style="display:flex;justify-content: center;align-items: center;text-align:center;margin-bottom:10px;"
				v-model="server">
				<uv-checkbox :name="true" disabled>
					<uv-text :custom-style="{fontSize:'15px',textAlign:'center'}" type="info"
						text="登录即代表你已同意服务协议&隐私政策"></uv-text>
				</uv-checkbox>
			</uv-checkbox-group>
			<uv-button type="primary" :text="'登 录'" shape="circle" @click="submit"></uv-button>
			<uv-text :custom-style="{marginLeft:'10px',marginTop:'5px',fontSize:'12px'}" type="info"
				text="未注册的账号,登录即自动注册"></uv-text>

			<view class="other">
				<!-- <uv-text align="center" text="其他登录方式" color="#979797"></uv-text> -->
				<uv-button style="margin-top: 10px;margin-bottom: 15px;"
					:customStyle="{fontWeight: 'bold',color:'#333',border:'0px', borderRadius: '8px',backgroundColor:'#eee'}"
					type="success" :text="'密码登录'" shape="circle" @click="routed('/pages/login/pwd')"></uv-button>
				<uv-grid v-if="false" :col="4" @click="click">
					<uv-grid-item v-for="(item,index) in baseList" :key="index">
						<uv-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.name" :size="40"></uv-icon>
						<text style="font-size: 15px;">{{item.title}}</text>
					</uv-grid-item>
				</uv-grid>
				<loginTips></loginTips>
			</view>
		</view>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	// 引入配置
	import config from '@/common/config';
	import loginTips from './loginTips';
	import {
		login,
		postMenu,
		getMenu,
		phoneMail,
		sendCode,
		getUser,
		getInfo
	} from '@/common/api.js';
	export default {
		components: {
			// 注册组件
			loginTips,
		},
		data() {
			return {
				scrollTop: 0,
				codeTips: '',
				seconds: 0,
				server: [true],
				baseList: [
					// 	{
					// 	name: 'weixin-circle-fill',
					// 	title: '微信登录'
					// }, {
					// 	name: 'zhifubao-circle-fill',
					// 	title: '支付宝登录'
					// }, {
					// 	name: 'qq-circle-fill',
					// 	title: 'QQ'
					// },
					{
						name: 'lock-open',
						title: '密码登录',
						url: 'pwd'
					}
				],
				appName: config.appName,
				captchaImg: '',
				model1: {
					username: '',
					code: '',
				},
				rules: {
					'username': {
						type: 'string',
						required: true,
						message: '请填写手机号或邮箱',
						trigger: ['blur', 'change']
					},
					'code': {
						type: 'string',
						required: true,
						message: '请填写收到的验证码',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		onLoad(e) {
			if (e.goback) {
				if (!e.goback.includes('pages/login/')) {
					uni.$uv.vuex('goback', e.goback);
				}
			}
			if (e.inviteCode) {
				uni.$uv.vuex('inviteCode', e.inviteCode);
			}
			if (this.vuex_token) {
				this.getuser();
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			change(e) {
				// this.$refs.toast.show({
				// 	message: `点击了第${name}个`
				// })
				console.log('弹窗状态改变：', e);
			},
			click(name) {
				if (this.baseList[name].url) {
					this.routed('pages/login/' + this.baseList[name].url);
				}
			},
			codeChange(text) {
				this.codeTips = text;
			},
			finish(e) {
				console.log('输入结束，当前值为：' + e);
			},
			// 提交
			submit() {
				var that = this;
				uni.$uv.toast("登录中...");
				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form.validate().then(res => {
					phoneMail({
						username: that.model1.username,
						inviteCode: that.inviteCode,
						code: that.model1.code
					}).then(e => {
						that.$refs.toast.show({
							message: '登录成功！',
						})
						that.$uv.vuex('vuex_token', that.aes_encrypt(e.token));
						that.$uv.vuex('refreshToken', that.aes_encrypt(e.refreshToken));
						setTimeout(function() {
							that.getuser();
						}, 1000)
						that.routed(that.goback);
					}).catch(e => {
						// that.$refs.toast.show({
						// 	message: '登录失败！',
						// })
						console.log(e)
					})
				}).catch(errors => {
					that.$refs.toast.show({
						icon: 'error',
						message: '校验失败'
					})
				})
			},
			getuser() {
				var that = this;
				getUser({
					custom: {
						auth: true,
						catch: false,
					}
				}).then(e => {
					that.$uv.vuex('vuex_user', e);
				}).catch(e => {})
			},
			getCode() {
				var that = this;
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendCode({
						custom: {
							auth: false
						},
						params: {
							username: this.model1.username,
							type: 'login'
						},
					}).then(e => {
						// console.log(e);
						// 通知验证码组件内部开始倒计时
						that.seconds = e.fail_time;
						that.captchaImg = e.img;
						that.$refs.uCode.start();
						// 这里此提示会被this.start()方法中的提示覆盖
						that.$refs.toast.show({
							message: '验证码已发送，请注意查收！'
						})
					}).catch(e => {
						console.log(e);
						if (e.data) {
							that.$refs.toast.show({
								message: e.message
							})
						}
					})

				} else {
					that.$refs.toast.show({
						message: '倒计时结束后再发送'
					})
				}
			},
			routed(url) {
				// 调用
				uni.$uv.route({
					url: url || config.indexUrl.replace(/^\//, ''),
				});
			}
		}
	}
</script>

<style lang="scss">
	.bg-conten {
		// background-color: #CED7E1;
		// background: url(../../static/yuanhua/login.jpg);
		// background-color: #FFF;
		height: 100vh;
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
	}

	.login-index {
		// width: calc(100% - 20px);
		background-color: #fff;
		margin-top: 10px;
		padding: 10px;

		.uv-content {
			margin: 0px;
			padding: 0px;
		}

		.uv-text {
			margin-left: 20px;
			margin-bottom: 20px;
		}

		::v-deep .uv-button {
			// margin: 40px;
			background-color: #69C0FF;
		}

		.uv-popup {
			::v-deep .uv-text {
				padding: 20px;
			}
		}

		.other {
			margin-top: 20px;

			.uv-grid {
				margin-top: 10px;
				margin-bottom: 15px;
			}
		}

	}
</style>